I am getting the "Uncaught ReferenceError: form is not defined".
However, the "form is defined in an object. I am not going to post the entire JS code just where the form is declared.
line 6- const elements =
line 7- {
line 8- form: document.querySelector("#new-task-form"),
line 9- input: document.querySelector("#new-task-input"),
line 10- list: document.querySelector("#tasks"),
line 11- cal:document.querySelector("#calendar")
line 12- }
line 91- const submitHandler = (event) =>{
line 92- event.preventDefault();
line 93- createTask();
line 94- }
line 96 - form.addEventListener("submit", submitHandler);
The form.addEventListener("submit", submitHandler); is calling back the function of submitHandler. So not sure why it is giving me the error
I figured out the issue.
const createTask = () => {
const id = createId()
const task = elements.input.value;
const date = elements.cal.value;
if(!task && !date) return alert("Please fill in task and select date");
if(!task) return alert("Please fill in task");
if(!date) return alert("Please select date");
const tasks = document.createElement("div");
tasks.innerHTML = `
<div class="task" date-id = "${id}">
<div class="content">
<input type ="checkbox" class="tick">
<input class = text id = "text" readonly>
<label class = "due-date" for ="text">${date}</label>
</div>
<div class = "action">
<button class="edit" data-id="${id}>Edit</button>
<button class="delete" data-id="${id}>Delet</button>
</div>
</div>
`
elements.list.appendChild(tasks)
return task
}
The issue was that const task = elements.input.value, was defined incorrectly, i had it as const task = input.value